<template>
    <div>
        <van-sticky v-if="articleIs != 'home'">
            <van-nav-bar title="修改文章" left-text="返回" left-arrow @click-left="onClickLeft" />
        </van-sticky>
        <van-field v-if="articleIs == 'home'" label="标题" v-model="article.title" />
        <van-field v-if="articleIs == 'home'" label="文章简介" autosize type="textarea" v-model="article.summary" maxlength="300" show-word-limit />
        <van-field v-if="articleIs == 'home'" label="题图" v-model="pictureUrl" />
        <van-uploader v-if="articleIs == 'home'" v-model="fileList" :after-read="afterRead" multiple :max-count="1" />
        <!-- <van-field label="选择商品" v-model="article.bookNumber" /> -->

        <van-dropdown-menu direction="up" v-if="articleIs == 'home'">
            <van-dropdown-item v-model="article.bookNumber" :options="option" />
        </van-dropdown-menu>
        <div id="div1234">
        </div>
        <!-- </van-sticky> -->
        <van-button round block type="info" @click="onSubmit">
            提交
        </van-button>
        <div style="height:50px"></div>
    </div>
</template>

<script>
import { Toast } from 'vant';
import E from 'wangeditor'
import axios from "axios";
export default {
    data() {
        return {
            content: "<p>随便写点什么吧</p>",
            article: {
                summary: "",
                bookNumber: 0,
            },
            pictureUrl: "",
            fileList: [],
            option: [
                { text: '不选择商品', value: 0 },
            ],
        }
    },
    props: {
        articleIs: String
    },
    mounted() {
        this.getData()
        this.editor()
    },
    methods: {
        onClickLeft() {
            // Toast('返回');
            this.$router.go(-1);//返回上一层
        },
        async afterRead(file) {
            // 此时可以自行将文件上传至服务器
            // 因为是上传的data文件,所以要有true标示
            let res = await this.$http.addPicture(file, true)
            //    window.console.log(res);
            if (res !== undefined && res.meta.status == 200) {
                this.pictureUrl = axios.defaults.baseURL + res.data[0]
                Toast('上传成功!');
            }
        },
        async onSubmit() {
            if (this.articleIs == 'home') {
                this.article.pictureUrl = this.pictureUrl
                let res = await this.$http.addArticle(this.article)
                if (res !== undefined && res.meta.status == 200) {
                    Toast('创建成功');
                    this.article = {
                        summary: "",
                        bookNumber: 0,
                        content: ""
                    }
                    this.fileList = []
                    this.pictureUrl = ""
                }
            } else {
                let data = {
                    articleNumber: this.article.articleNumber,
                    content: this.article.content
                }
                window.console.log(this.article.content)
                window.console.log(this.content)
                let res = await this.$http.editArticle(data)
                if (res !== undefined && res.meta.status == 200) {
                    Toast('修改成功');
                }
            }
        },
        async getData() {
            let data = "0/1/1000"
            let res = await this.$http.getBookByUser(data)
            for (let i = 0; i < res.data.records.length; i++)
                this.option.push({
                    text: res.data.records[i].name,
                    value: res.data.records[i].bookNumber
                })
        },
        editor() {
            var editor = new E('#div1234')
            // editor.customConfig.zIndex = 10000
            editor.customConfig.uploadImgServer = axios.defaults.baseURL + '/picture/'
            editor.customConfig.uploadFileName = 'file'
            //限制图片大小为10M
            editor.customConfig.uploadImgMaxSize = 10 * 1024 * 1024
            editor.customConfig.withCredentials = true
            editor.customConfig.uploadImgHeaders = {
                'Accept': '*/*',

                //    'Accept': 'text/x-json'
                //  'Accept': 'multipart/form-data'
                //  'Accept': 'multipart/form-data; charset=utf-8'
                // 'Authorization': 'Bearer ' + token    //头部token
            }
            editor.customConfig.menus = [          //菜单配置
                'head',  // 标题
                'bold',  // 粗体
                // 'fontSize',  // 字号
                //  'fontName',  // 字体
                'italic',  // 斜体
                'underline',  // 下划线
                'strikeThrough',  // 删除线
                //  'foreColor',  // 文字颜色
                //   'backColor',  // 背景颜色
                'link',  // 插入链接
                // 'list',  // 列表
                'justify',  // 对齐方式
                'quote',  // 引用
                //    'emoticon',  // 表情
                'image',  // 插入图片
                // 'table',  // 表格
                'video',  // 插入视频
                //     'code',  // 插入代码
                //    'undo',  // 撤销
                //   'redo'  // 重复
            ]
            //下面是最重要的的方法

            editor.customConfig.uploadImgHooks = {
                before: function (xhr, editor, files) {
                    // 图片上传之前触发
                    // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，files 是选择的图片文件
                    xhr
                    editor
                    files
                    window.console.log("上传之前")
                    window.console.log(xhr)
                    window.console.log(editor)
                    window.console.log(files)
                    Toast('上传之前');
                },

                error: function (xhr, editor) {
                    // 图片上传出错时触发
                    // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象
                    window.console.log("上传出错")
                    window.console.log(xhr)
                    window.console.log(editor)
                    Toast('上传出错');
                },
                timeout: function (xhr, editor) {
                    window.console.log("上传超时")
                    window.console.log(xhr)
                    window.console.log(editor)
                    Toast('上传超时');
                    // 图片上传超时时触发
                    // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象
                },

                // 如果服务器端返回的不是 {errno:0, data: [...]} 这种格式，可使用该配置
                // （但是，服务器端返回的必须是一个 JSON 格式字符串！！！否则会报错）
                customInsert: function (insertImg, result, editor) {
                    // 图片上传并返回结果，自定义插入图片的事件（而不是编辑器自动插入图片！！！）
                    // insertImg 是插入图片的函数，editor 是编辑器对象，result 是服务器端返回的结果
                    editor
                    // 举例：假如上传图片成功后，服务器端返回的是 {url:'....'} 这种格式，即可这样插入图片：
                    insertImg(url)
                    if (result != undefined && result.meta.status == 200) {

                        Toast('上传成功');
                        window.console.log("上传成功")
                        window.console.log(result)
                        var url = axios.defaults.baseURL + result.data[0]
                        //    var url = "http://localhost:8080/book/static/%E5%9B%BE%E5%BA%93/ba4a2845-c7c5-4874-8dde-ad06275d52d0Flowing_Ribbon.jpg"
                        insertImg(url)
                    }
                    else {
                        Toast(result.meta.status + result.meta.msg);
                        window.console.log("上传失败")
                        // this.$message({
                        //     message: result.meta.status + result.meta.msg,
                        //     type: 'success'
                        // });
                    }
                    // result 必须是一个 JSON 格式字符串！！！否则报错
                }
            }
            editor.customConfig.onchange = (html) => {
                this.article.content = html
            }
            editor.create()
            editor.txt.html(this.content)

            // this.article.content = editor.txt.html()
            //  this.article.content2 = editor.txt.text()\
        },
        async getData2(articleId) {
            if (articleId != undefined) {
                let res = await this.$http.getArticleById(articleId)
                if (res !== undefined && res.meta.status == 200) {
                    this.content = res.data.content
                    //  this.article = res.data
                    this.article.articleNumber = res.data.articleNumber
                }
            }
            this.editor()
        }
    },
    // 当页面进入时
    beforeRouteEnter(to, from, next) {
        //   window.console.log("你进入了正文页"); // undefined
        //    window.console.log(this); //undefined，不能用this来获取vue实例
        //  window.console.log('组件路由钩子：beforeRouteEnter');
        next(vm => {
            //    window.console.log(vm); //vm为vue的实例
            //    window.console.log("参数为" + vm.$route.query.id)
            vm.getData2(vm.$route.query.id)
            // else
            //     vm.getData(0)
            // if (vm.$route.query.findString != undefined)
            //     vm.getData2(vm.$route.query.findString)
            //    vm.getData2(vm.$route.query.findString)
            //    window.console.log('组件路由钩子beforeRouteEnter的next');
        });
    },

}




</script>

<style >
.w-e-text-container {
    height: 290px !important; /*!important是重点，因为原div是行内样式设置的高度300px*/
}
</style>